<template>
  <div id="eventschedule2" @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow">
          <span class="tit">
            <i class="iconfont icon-activity_fill"></i>
            &nbsp;{{moddata.config.title}}
            <span class="type" @click="changtype" v-if="!IsDefault">按{{GroupType==0?'会场':'日期'}}分组</span>
          </span>

        </div>
        <div class="text">
          <div class="date_list">
            <div class="li" :class="{active:item==Target}" v-for="(item,index) in Group" :key="item" v-if="index<=4" @click="choseDate(item)">
              <span>{{item}}</span>
            </div>
            <div class="li" v-if="Group.length>=5">
              <el-dropdown placement="bottom" :show-timeout="100">
                <div>更多{{GroupType==0?'日期':'会场'}}</div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item,index) in Group" :key="item" v-if="index>4">
                    <div @click="choseDate(item)">{{item}}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="plsdesc" v-if="GroupType==1">{{Desc}}</div>
          <div class="s_li">
            <div class="s_li_fhc" v-for="val in Dic" :key="val.Key" v-if="!IsDefault">
              <div class="place">
                <span class="point"></span>
                <div class="theme">{{val.Key}}</div>
                <div class="info" v-if="GroupType==0">{{val.Desc}}</div>
              </div>
              <div class="con" v-for="item in val.AgendaDesc" :key="item.Title">
                <div>
                  <div class="time">{{item.StartTime}} - {{item.EndTime}}</div>
                  <p class="theme">{{item.Title}}</p>
                </div>
                <p class="desc">{{item.Content}}</p>
              </div>
            </div>
            <div class="s_li_fhc" v-for="val in Dic" :key="val.Key" v-if="IsDefault">
              <div class="place" v-for="item in val.AgendaDesc" :key="item.Title">
                <span class="point"></span>
                <div>
                  <div class="time">{{item.StartTime}} - {{item.EndTime}}</div>
                  <div class="title">{{item.Title}}</div>
                </div>
                <div class="info">{{item.Content}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import {
    MessageBox
  } from 'element-ui'
  export default {
    props: ["moddata", "index"],
    data: function () {
      return {
        maskshow: false,
        Dic: [],
        Group: [],
        GroupType: 0,
        Guests: [],
        IsDefault: true,
        Target: "",
        Desc: "",
        pending: false
      }
    },
    mounted() {
      this.getData("", this.GroupType, this.parameters.taskId);
    },
    computed: {
      ...mapState([
        "parameters"
      ]),
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'SetShowMod',
          index: this.index
        })
      },
      deletemod: function () {
        this.$store.dispatch('deleteMod', this.index)
      },
      getData(item, type, id) {
        let that = this;
        if (!that.pending) {
          $.ajax("/Event/EventHelper/BuildAgendaModule2", {
            type: "post",
            contentType: "application/json",
            headers: {
              ISGZIPDATA: "0"
            },
            data: JSON.stringify({
              taskId: id,
              item: item,
              type: type
            }),
            beforeSend: function () {
              that.pending = true;
            },
            complete: function () {
              that.pending = false;
            },
            success: function (data) {
              that.Dic = data.Dic;
              that.Group = data.Group;
              that.GroupType = data.GroupType;
              that.Target = data.Target;
              that.IsDefault = data.IsDefault;
              that.Desc = data.Desc ? data.Desc : ""
            },
            error: function (err) {
              console.log(err)
            }
          });
        }

      },
      choseDate(day) {
        if(this.Target != day){
          this.getData(day, this.GroupType, this.parameters.taskId)
        }
      },
      changtype() {
        let type = this.GroupType == 0 ? 1 : 0;
        this.getData("", type, this.parameters.taskId);
      }
    }
  }
</script>

<style lang="less" scoped>
  .tit {
    position: relative;
    .type {
      position: absolute;
      top: 6px;
      right: -100px;
      font-size: 14px;
      color: #409EFF;
      margin-left: 10px;
      cursor: pointer;
    }
  }


  .text {
    text-align: center;
  }

  .date_list {
    text-align: center;
    display: table;
    width: 100%;
    margin-bottom: 24px;
    table-layout: fixed;
    .li {
      display: table-cell;
      background: rgba(0, 0, 0, 0.1);
      cursor: pointer;
      height: 48px;
      line-height: 48px;
      text-align: center;
      vertical-align: middle;
      position: relative;
      transition: all .5s;
      .el-dropdown {
        width: 100%;
      }
    }
    .active {
      background: #ff5303 !important;
      color: #fff !important;
    }
  }

  .plsdesc {
    max-width: 90%;
    min-width: 800px;
    text-align: left;
    display: inline-block;
    color: #666;
    margin-bottom: 10px;
  }

  .s_li {
    max-width: 90%;
    min-width: 640px;
    display: inline-block;
    text-align: left;
    border-left-style: dashed;
    border-left-width: 2px;
    margin-left: 12px;
    border-color: #FF9933;
    padding-left: 30px;
    .s_li_fhc {
      padding-top: 15px;
      .place {
        margin-bottom: 12px;
        position: relative;
        .point {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background: #ff5303;
          box-shadow: 0 0 10px #333;
          position: absolute;
          top: 8px;
          left: -39px;
        }
        .theme {
          font-size: 18px;
          font-weight: bold;
        }
        .info {
          font-size: 14px;
          color: #666;
          line-height: 25px;
        }
        .time {
          float: left;
          font-size: 18px;
          margin: 0;
          font-weight: bold;
        }
        .title {
          font-size: 18px;
          font-weight: bold;
          margin-left: 140px;
          text-align: left;
          margin-bottom: 8px;
        }
      }
      .con {
        font-size: 14px;
        margin-bottom: 8px;
        .time {
          float: left;
          margin: 0;
          font-weight: bold;
        }
        .theme {
          margin-left: 108px;
          font-weight: bold;
        }
        .desc {
          color: #999;
        }
      }
    }
  }
</style>